<template>
	<div>
		<el-container>
			<el-header>Header{{id}}}
				<!-- 查询方式 -->
				<el-row style="margin-top: -60px;">
					<el-col :span="6">查询方式：
						<el-radio-group v-model="radio">
							<el-radio :label="3">全部人员</el-radio>
							<el-radio :label="6">在岗人员</el-radio>
							<el-radio :label="9">离职人员</el-radio>
						</el-radio-group>
					</el-col>
					<el-col :span="1">
						<el-button type="primary" @click="filtrate">筛选</el-button>
					</el-col>
					<el-col :span="1">
						<el-button>刷新</el-button>
					</el-col>
					<el-col :span="2" :offset="14" style="background-color: red;">用户名</el-col>
				</el-row>
				<!-- 搜索框 -->
				<el-row>
					<el-col :span="6">
						<el-input placeholder="查找姓名" v-model="search_value">
							<el-button slot="append" icon="el-icon-search"></el-button>
						</el-input>
					</el-col>
					<el-col :span="2" :offset="16">
						<el-link type="primary" :underline="false"  @click="filtrate">刷新</el-link>
						<el-link type="success" :underline="false"  @click="filtrate">导出数据</el-link>
					</el-col>
				</el-row>
			</el-header>
			<el-main>Main</el-main>
		</el-container>
	</div>
	
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				radio: 3,
				radio_values: ['all', 'on_duty', 'dimission'], // 单选框多值 all,on_duty,dimission
				search_value: '',
			}
		},
		created() {
			this.id = this.$route.query.id;
		},
		methods: {
			filtrate() {
				let radio_value = this.radio
				if (radio_value == 3) {
					this.$message({
						message: this.radio_values[0],
						type: 'success'
					});
				}
				if (radio_value == 6) {
					this.$message({
						message: this.radio_values[1],
						type: 'success'
					});
				}
				if (radio_value == 9) {
					this.$message({
						message: this.radio_values[2],
						type: 'success'
					});
				}
			}
		}
	}
</script>

<style>
	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-main {
		background-color: #E9EEF3;
		color: #333;
		text-align: center;
		line-height: 160px;
	}

	body>.el-container {
		margin-bottom: 40px;
	}
</style>
